<template>
  <view class="operation-data-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-title">营运数据</view>
    </view>

    <!-- 数据类型选择器 -->
    <view class="data-type-selector">
      <view 
        v-for="(item, index) in dataTypes" 
        :key="index"
        class="selector-item" 
        :class="{ active: currentDataType === item.type }"
        @click="switchDataType(item.type)"
      >
        <text>{{ item.name }}</text>
      </view>
    </view>

    <!-- 数据统计卡片 -->
    <view class="data-cards">
      <view v-for="(card, index) in currentDataCards" :key="index" class="data-card">
        <view class="card-title">{{ card.title }}</view>
        <view class="card-value">{{ card.value }}</view>
        <view class="card-desc">{{ card.desc }}</view>
      </view>
    </view>

    <!-- 趋势图表 -->
    <view class="trend-chart-container">
      <view class="chart-header">
        <view class="chart-title">最近7天趋势</view>
      </view>
      <view class="chart-content">
        <qiun-data-charts 
          type="line" 
          :opts="chartOpts" 
          :chartData="chartData" 
          :canvas2d="true"
          :canvasId="'operationDataChart'"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 数据类型定义
const dataTypes = ref([
  { name: '财务数据', type: 'finance' },
  { name: '停车数据', type: 'parking' },
  { name: '用户数据', type: 'user' },
  { name: '资源数据', type: 'resource' }
])

// 当前选中的数据类型
const currentDataType = ref('finance')

// 切换数据类型
const switchDataType = (type: string) => {
  currentDataType.value = type
  loadData()
}

// 各类型数据卡片内容
const financeCards = ref([
  { title: '总收入', value: '¥1,234,567', desc: '累计至今' },
  { title: '本月收入', value: '¥123,456', desc: '较上月 +12.5%' },
  { title: '日均收入', value: '¥4,567', desc: '近7天平均' },
  { title: '订单转化率', value: '87.5%', desc: '较上月 +2.3%' }
])

const parkingCards = ref([
  { title: '总停车次数', value: '1,234,567', desc: '累计至今' },
  { title: '本月停车次数', value: '123,456', desc: '较上月 +8.7%' },
  { title: '日均停车次数', value: '4,567', desc: '近7天平均' },
  { title: '平均停车时长', value: '2.5小时', desc: '较上月 -0.3小时' }
])

const userCards = ref([
  { title: '总用户数', value: '123,456', desc: '累计至今' },
  { title: '本月新增', value: '12,345', desc: '较上月 +15.2%' },
  { title: '日均活跃', value: '45,678', desc: '近7天平均' },
  { title: '用户留存率', value: '78.5%', desc: '较上月 +1.8%' }
])

const resourceCards = ref([
  { title: '总泊位数', value: '12,345', desc: '累计至今' },
  { title: '泊位利用率', value: '76.5%', desc: '较上月 +3.2%' },
  { title: '设备在线率', value: '98.7%', desc: '近7天平均' },
  { title: '异常设备数', value: '23', desc: '较上月 -5' }
])

// 根据当前选中类型显示对应数据卡片
const currentDataCards = computed(() => {
  switch (currentDataType.value) {
    case 'finance':
      return financeCards.value
    case 'parking':
      return parkingCards.value
    case 'user':
      return userCards.value
    case 'resource':
      return resourceCards.value
    default:
      return financeCards.value
  }
})

// 图表数据 - 模拟最近7天数据
const generateChartData = () => {
  // 获取最近7天的日期
  const dates = []
  const now = new Date()
  for (let i = 6; i >= 0; i--) {
    const date = new Date(now)
    date.setDate(date.getDate() - i)
    const month = date.getMonth() + 1
    const day = date.getDate()
    dates.push(`${month}/${day}`)
  }

  // 根据当前数据类型生成对应的数据
  let seriesData = []
  let seriesName = ''

  switch (currentDataType.value) {
    case 'finance':
      seriesData = [12345, 13456, 14567, 13789, 15678, 16789, 17890]
      seriesName = '收入(元)'
      break
    case 'parking':
      seriesData = [1234, 1345, 1456, 1378, 1567, 1678, 1789]
      seriesName = '停车次数'
      break
    case 'user':
      seriesData = [4567, 4678, 4789, 4890, 5012, 5123, 5234]
      seriesName = '活跃用户'
      break
    case 'resource':
      seriesData = [76.5, 77.8, 78.2, 79.1, 78.5, 80.2, 81.5]
      seriesName = '泊位利用率(%)'
      break
    default:
      seriesData = [12345, 13456, 14567, 13789, 15678, 16789, 17890]
      seriesName = '收入(元)'
  }

  return {
    categories: dates,
    series: [{
      name: seriesName,
      data: seriesData
    }]
  }
}

// 图表数据
const chartData = ref(generateChartData())

// 图表配置
const chartOpts = ref({
  color: ['#4080FF'],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    show: false
  },
  xAxis: {
    disableGrid: true,
    boundaryGap: true
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    data: [{
      min: 0
    }]
  },
  extra: {
    line: {
      type: 'straight',
      width: 2,
      activeType: 'hollow',
      linearType: 'custom',
      lineColor: '#4080FF',
      gradient: true
    },
    tooltip: {
      showBox: true,
      showArrow: true,
      showCategory: true,
      borderWidth: 0,
      borderRadius: 4,
      borderColor: '#4080FF',
      borderOpacity: 0.7,
      bgColor: '#4080FF',
      bgOpacity: 0.7,
      gridType: 'dash',
      dashLength: 4,
      gridColor: '#CCCCCC',
      fontColor: '#FFFFFF',
      horizentalLine: false,
      xAxisLabel: false,
      yAxisLabel: false,
      labelBgColor: '#4080FF',
      labelBgOpacity: 0.7,
      labelFontColor: '#FFFFFF'
    }
  }
})

// 加载数据
const loadData = () => {
  // 实际项目中这里应该调用API获取数据
  console.log('加载数据类型:', currentDataType.value)
  
  // 更新图表数据
  chartData.value = generateChartData()
}

// 页面加载时初始化数据
onMounted(() => {
  loadData()
})
</script>

<style scoped lang="scss">
.operation-data-container {
  padding: 30rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30rpx;
  
  .header-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333333;
  }
}

.data-type-selector {
  display: flex;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  padding: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .selector-item {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #666666;
    border-radius: 12rpx;
    transition: all 0.3s;
    
    &.active {
      background-color: #4080FF;
      color: #ffffff;
      font-weight: 500;
    }
  }
}

.data-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-bottom: 30rpx;
  
  .data-card {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .card-title {
      font-size: 24rpx;
      color: #666666;
      margin-bottom: 10rpx;
    }
    
    .card-value {
      font-size: 36rpx;
      font-weight: 600;
      color: #333333;
      margin-bottom: 10rpx;
    }
    
    .card-desc {
      font-size: 22rpx;
      color: #999999;
    }
  }
}

.trend-chart-container {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .chart-header {
    margin-bottom: 20rpx;
    
    .chart-title {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
    }
  }
  
  .chart-content {
    height: 500rpx;
  }
}
</style>